<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
	#abc{
		width:400px ;
		height:400px ;
		border-radius: 50%;
		border: 1px solid red;
		position: relative;
		margin: 0 auto;
		background: url(img/u=1173433402,302100680&fm=26&gp=0.jpg);
	}
	#kdlist{
		margin: 0;
		padding: 0;
	}
	#abc li{
		position: absolute;
		width: 4px;
		height: 20px;
		left:50%;
		top: 0;
		transform-origin:2px 200px ;
		background:gold ;
		list-style: none;
		z-index: 1;
	}
	#abc a{
		position: absolute;
		background:white ;
		width: 4px;
		height: 10px;
		transform-origin:2px 200px ;
		left:50%;
		top: 0;
	}
	.nei{
		position: absolute;
		width: 20px;
		height: 20px;
		background:black ;
		left:50%;
		top: 50%;
		margin-left: -10px;
		margin-top: -10px;
		border-radius:50% ;
		z-index: 1;
	}
	.qq{
		position: absolute;
		width: 20px;
		height: 100px;
		margin-left: 190px;
		margin-top:102px ;
		background:white ;
		transform-origin: bottom;
		transform: rotate(0deg);
		border-radius:50% ;
	}
	.qq2{
		position: absolute;
		width: 20px;
		height: 82px;
		margin-left: 190px;
		margin-top:126px ;
		background:green ;
		transform-origin: bottom;
		transform: rotate(0deg);
		border-radius:50% ;
	}
	.qq3{
		position: absolute;
		width: 10px;
		height: 50px;
		margin-left:195px;
		margin-top:149px ;
		background:gold;
		transform-origin: bottom;
		transform: rotate(0deg);
		border-radius:50% ;
	}
	</style>
	<body>
		<div id="abc">
			<ul id="kdlist"></ul>
			<div class="nei">
				
			</div>
			<div class="qq"></div>
			<div class="qq2"></div>
			<div class="qq3"></div>
		</div>
		
	</body>
	  <script>
   	for (var i=0;i<12;i++) {
   	var li=document.createElement("li");
   	li.style.transform="rotate("+i*30+"deg)";
 document.getElementById("kdlist").appendChild(li);
   	}
   for (var z=0;z<60;z++) {
    var a=document.createElement("a");
    a.style.transform="rotate("+z*6+"deg)"	  ;  document.getElementById("kdlist").appendChild(a);
    }
 </script>
<!--//圆形标盘
//60个刻度 每个刻度之间6°
//rotate origin
//appendChild
// 	dom.style.transform="rotate("+i*6)"-->
   
</html>
